<template>
  <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { cloneDeep } from 'lodash'
import { onMounted, ref, reactive, onBeforeUnmount, watch } from 'vue'
let myChart = null
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  data1: {
    type: Array,
    default: () => [],
  },
  data2: {
    type: Array,
    default: () => [],
  },
  data3: {
    type: Array,
    default: () => [],
  },
  limit: {
    type: Array,
    default: () => [0, 4],
  },
  isLoop: {
    type: Boolean,
    default: true,
  },
  grid: {
    type: Object,
    default: () => ({
      top: '15%',
      left: '0%',
      right: '10%',
      bottom: '10%',
      containLabel: true,
    }),
  },
})
const propsCopy = reactive({
  data1: cloneDeep(props.data1),
  data2: cloneDeep(props.data2),
  data3: cloneDeep(props.data3),
  xData: cloneDeep(props.xData),
})
const [startValue, endValue] = props.limit
const option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: props.grid,
  legend: {
    // itemGap: 50,
    top: '1%',
    data: ['正在制定方案', '正在施工', '已达标'],
    textStyle: {
      color: '#f9f9f9',
      borderColor: '#fff',
    },
  },
  // 控制显示几个柱子
  dataZoom: {
    show: false,
    startValue,
    endValue,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      axisLine: {
        //坐标轴轴线相关设置。数学上的x轴
        show: false,
        lineStyle: {
          color: '#f9f9f9',
        },
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: props.xData,
    },
  ],
  yAxis: [
    {
      name: '个',
      type: 'value',
      min: 0,
      // max: 140,
      splitNumber: 7,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#0a3256',
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        // margin: 20,
        textStyle: {
          color: 'rgb(148,159,167)',
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(108, 128, 151, 0.3)',
        },
      },
    },
    {
      type: 'value',
      // min: 0,
      // max: 140,
      splitNumber: 7,
      axisLine: {
        show: false,
      },
      axisLabel: {
        // margin: 20,
        textStyle: {
          color: 'rgb(148,159,167)',
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(108, 128, 151, 0.3)',
        },
      },
    },
  ],
  series: [
    {
      name: '正在制定方案',
      type: 'line',
      // symbol: 'circle', //设定为实心点
      symbol: 'emptyCircle',
      showAllSymbol: true,
      symbolSize: 7,
      smooth: true,
      itemStyle: {
        normal: {
          color: `#ff1121`,
          lineStyle: {
            //线的颜色
            color: `#ff1121`,
            width: 1.5,
          },
          areaStyle: {
            type: 'default',
            //渐变色实现
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, //变化度
              //三种由深及浅的颜色
              [
                {
                  offset: 0,
                  color: 'rgba(255, 17, 33, 0.2)',
                },
                {
                  offset: 1,
                  color: 'rgba(255, 17, 33, 0.1)',
                },
              ]
            ),
          },
        },
      },
      data: props.data1,

      yAxisIndex: 0,
    },
    {
      name: '正在施工',
      type: 'line',
      // symbol: 'circle', //设定为实心点
      symbol: 'emptyCircle',
      showAllSymbol: true,
      symbolSize: 7,
      smooth: true,
      itemStyle: {
        normal: {
          color: `#FFDF04`,
          lineStyle: {
            //线的颜色
            color: `#FFDF04`,
            width: 1.5,
          },
          areaStyle: {
            type: 'default',
            //渐变色实现
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, //变化度
              //三种由深及浅的颜色
              [
                {
                  offset: 0,
                  color: 'rgba(255, 223, 4, 0.2)',
                },
                {
                  offset: 1,
                  color: 'rgba(255, 223, 4, 0.1)',
                },
              ]
            ),
          },
        },
      },
      data: props.data2,

      yAxisIndex: 0,
    },
    {
      name: '已达标',
      type: 'line',
      symbol: 'circle', //设定为实心点
      symbol: 'emptyCircle',
      showAllSymbol: true,
      symbolSize: 7,
      smooth: true,
      itemStyle: {
        normal: {
          color: `#00ff68`,
          lineStyle: {
            //线的颜色
            color: `#00ff68`,
            width: 1.5,
          },
          areaStyle: {
            type: 'default',
            //渐变色实现
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, //变化度
              //三种由深及浅的颜色
              [
                {
                  offset: 0,
                  color: 'rgba(7, 240, 85, 0.2)',
                },
                {
                  offset: 1,
                  color: 'rgba(7, 240, 85, 0.1)',
                },
              ]
            ),
          },
        },
      },
      data: props.data3,

      yAxisIndex: 0,
    },
  ],
})
const chart = ref()
const timer1 = ref(null)
function _clearInterval(timeId) {
  timeId && window.clearInterval(timeId)
}
const resizeHandler = () => {
  myChart.resize()
}
const initCharts = () => {
    if (myChart) {
    myChart.clear()
    myChart.dispose()
  }
  chart.value.removeAttribute('_echarts_instance_')
  myChart= echarts.init(chart.value)
  myChart.setOption(option.value)
  window.addEventListener('resize', resizeHandler)
  if (props.isLoop) {
    // 使用定时器
    timer1.value = setInterval(() => {
      // y轴
      const item1 = propsCopy.data1.shift()
      propsCopy.data1.push(item1)
      const item2 = propsCopy.data2.shift()
      propsCopy.data2.push(item2)
      const item3 = propsCopy.data3.shift()
      propsCopy.data3.push(item3)
      // x轴
      const item4 = propsCopy.xData.shift()
      propsCopy.xData.push(item4)
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          show: true,
        },
        series: [
          {
            data: propsCopy.data1,
            type: 'line',
          },
          {
            data: propsCopy.data2,
            type: 'line',
          },
          {
            data: propsCopy.data3,
            type: 'line',
          },
        ],
        xAxis: {
          type: 'category',
          data: propsCopy.xData,
        },
      })
    }, 4000)
  }
}
watch(
  () => props,
  (newValue, oldValue) => {
    propsCopy.data1 = cloneDeep(newValue.data1)
    propsCopy.data2 = cloneDeep(newValue.data2)
    propsCopy.data3 = cloneDeep(newValue.data3)
    propsCopy.xData = cloneDeep(newValue.xData)
    if (props.isLoop) {
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          show: true,
        },
        xAxis: {
          data: propsCopy.xData,
        },
        series: [
          {
            data: propsCopy.data1,
          },
          {
            data: propsCopy.data2,
          },
          {
            data: propsCopy.data3,
          },
        ],
      })
    }
  },
  { deep: true }
)
onMounted(() => {
  initCharts()
})
onBeforeUnmount(() => {
  if (props.isLoop) {
    _clearInterval(timer1.value)
  }
  window.removeEventListener('resize',resizeHandler)
})
defineExpose({
  initCharts,
  props,
})
</script>
<style scoped lang="scss">
.chart-render-box {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>
